<template>
    <view class="page">
        <view class="page-form">
            <view class="page-form-item" v-for="(item,index) in formItem" :key="index">
                <text>{{item.name}}</text>
                <input type="text" :placeholder="'请输入'+item.name" v-model="formItem[index]['input']"/>
            </view>
<!--            <view class="page-form-item">-->
<!--                <text>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</text>-->
<!--                <input type="number" placeholder="请输入手机号" v-model="phone"/>-->
<!--            </view>-->
            <view class="page-form-item">
                <text>报名费用</text>
                <text class="red">{{activityDetail.cost==0.00?'免费':'￥'+activityDetail.cost}}</text>
            </view>
        </view>
        <view class="page-radio" v-if="userStatement!=null">
            <radio color="#3981FF" size="14" class="radio" @click="radioChange" :checked="radioChecked"></radio>
            <text @click="skipStatement">我已阅读并同意相关服务条款和隐私政策</text>
        </view>
        <view class="page-btn" :class="{'padding':userStatement==null}">
            <button v-if="radioChecked==1" class="enrolment" @click="buildOrder">提交</button>
            <button v-if="radioChecked==0" class="enrolment grey" @click="checklistRadio">提交</button>
<!--            <button class="enrolment" @click="buildOrder">提交</button>-->
        </view>
    </view>
</template>

<script>
    export default {
        name: "enrolmentActivities",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                activityId: '',
                realname: '',
                phone: '',
                activityDetail:{},
                formItem: [],
                radioChecked: 1,
                userStatement: '',
            }
        },
        onLoad(query){
            this.activityId = query.activityId;
            this.getActivityDetail();
            this.getStatement();
        },
        methods:{
            checklistRadio(){
                uni.showToast({
                    icon: 'none',
                    title: '未勾选我已阅读并同意相关服务条款和隐私政策'
                })
            },
            //发布需求前获取服务条款
            async getStatement(){
                const res = await this.$api.getTermsService();
                if (res.data.level == 'success'){
                    this.userStatement = res.data.data;
                }
            },
            radioChange(){
                if (this.radioChecked==0){
                    this.radioChecked = 1;
                } else {
                    this.radioChecked = 0;
                }
            },
            //跳转服务条款
            skipStatement(){
                uni.navigateTo({
                    url:'/pages/details/activityDetail/enrolmentActivities/userStatement/userStatement'
                })
            },
            //获取活动详情
            async getActivityDetail(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId
                }
                const res = await this.$api.getActivityDetail(params);
                if (res.data.level == 'success'){
                    this.activityDetail = res.data.data;
                    this.formItem = res.data.data.sign_up_table;
                }
            },
            //提交报名活动
            async buildOrder(){
                let value = [];
                this.formItem.forEach(item => {
                    value.push(item.input)
                });
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    activity_id: this.activityId,
                    info: value
                }
                const res = await this.$api.buildOrder(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    if (res.data.data) {
                        this.weChatPayment(res.data.data.order_num);
                    }else {
                        setTimeout(function () {
                            uni.navigateBack({
                                delta: 1
                            })
                        },3000)
                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    // setTimeout(function () {
                    //     uni.navigateBack({
                    //         delta: 1
                    //     })
                    // },3000)
                }
            },
            //微信支付
            async weChatPayment(id){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    order_num: id
                }
                const res = await this.$api.weChatPayment(params);
                if (res.data.level == 'success'){
                    let data = res.data.data;
                    wx.requestPayment({
                        timeStamp: data.timeStamp,
                        nonceStr: data.nonceStr,
                        package: data.package,
                        signType: data.signType,
                        paySign: data.paySign,
                        success (res) {
                            // console.log('success');
                            // this.$currency.showToast('支付成功！')
                            // setTimeout(function () {
                            //     uni.navigateBack({
                            //         delta: 1
                            //     })
                            // },1500)
                            uni.navigateBack({
                                delta: 1
                            })
                        },
                        fail (res) {
                            console.log(res)
                        }
                    })
                    // uni.showToast({
                    //     icon:'success',
                    //     title: res.data.message
                    // })
                } else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message
                    })
                }

            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
        @include flex(flex-start);
        flex-direction: column;
    }
    .page-form{
        background: #FFFFFF;
        width: 100vw;
        .page-form-item{
            @include flex(flex-start);
            flex-direction: row;
            padding: 38rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                width: 128rpx;
            }
            input{
                margin-left: auto;
                width: calc(100% - 184rpx);
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            .red{
                margin-left: auto;
                color: #FF6565;
                text-align: right;
            }
        }
        .page-form-item:last-child{
            border-bottom: none;
        }
    }
    .page-radio{
        margin-top: auto;
        /*padding: 30rpx;*/
        @include flex(flex-start);
        flex-direction: row;
        .radio{
            transform: scale(0.7);
        }
        text{
            color: #666666;
            font-size: 24rpx;
            line-height: 33rpx;
            height: 33rpx;
        }
    }
    .page-btn{
        /*margin-top: auto;*/
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            background: #3782FF;
            color: #FFFFFF;
            text-align: center;
            padding: 0;
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 44rpx;
        }
        .grey{
            background: #999999;
        }
    }
    .padding{
        margin-top: auto;
    }
</style>